<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>layout布置页面</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
        <!--ztree的引入 -->
		<script type="text/jscript" charset="UTF-8" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
		<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" />
		
		
		
		
		<script type="text/javascript">
//			页面加载
			$(function(){
				var setting={
					data:{
						simpleData:{
							enable:true
						}
					},
					callback:{
						onClick:function(event,treeId,treeNode,clickFlag){
							var content ='<div style="width:100%;height:100%;overflow:hidden;">'
							+'<iframe src="'
							+treeNode.page
							+'" scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></div>';
//							处理父节点的点击事件
							if(treeNode.page!=undefined&&treeNode.page!=""){
//							如果存在
							if($("#mytable").tabs('exists',treeNode.name)){
//								那么选择
								$("#mytable").tabs('select',treeNode.name);
							}else{
//								不存在那么创建一个新的选项卡
								$("#mytable").tabs('add',{
								title:treeNode.name,
								content:content,
								closable:true
							
						});
								
								
							}
							
							}
							
						
							
							
						}
						
					}
				};
				
				var zNodes=[
//				Id 不要写小写
				{id:1,pId:0,name:"父节点一"},
				{id:2,pId:0,name:"父节点二"},
				{id:11,pId:1,name:"传智播客",page:"http://www.itcast.cn"},
				{id:12,pId:1,name:"百度",page:"http://www.baidu.com"},
				{id:13,pId:2,name:"父节点二的子节点一"}
				];
				
				
				$.fn.zTree.init($("#myztree"),setting,zNodes);
				
				
				
				
				$("#menu").menu('show',{
					
					left:400,
					top:200
					
					
				});
				
				
			});
			
		
			
		</script>
	</head>
	
	<body class="easyui-layout">
		<div data-options="region:'north',title:'传智播客管理系统'" style="height: 100px;">北</div>
		<div data-options="region:'south',title:'南部标题'" style="height: 100px;">南</div>
		<div data-options="region:'west',title:'菜单导航'" style="width: 200px;">
			<div class="easyui-accordion" data-options="fit:true">
				<div data-options="title:'基础菜单'">
					<!--
                    	作者：250226715@qq.com
                    	时间：2017-07-20
                    	描述：ZTree
                    -->
                    <ul id="myztree" class="ztree"></ul>
					
					
					
					
					
				</div>
				<div data-options="title:'系统菜单'">菜单二</div>
				
			</div>
			
			
		</div>
		<div data-options="region:'east',title:'东部标题'" style="width: 200px;">东</div>
		<div data-options="region:'center',title:'中心标题'">
			<div class="easyui-tabs" data-options="fit:'true'" id="mytable">
				<div data-options="title:'选项卡面板一',closable:'true'">面板一</div>
				<div data-options="title:'选项卡面板二',closable:'true'">面板二</div>
				>
				
				
			</div>
			
			
		</div>
		
		
		<div id="menu" class="easyui-menu" style="width: 150px;">
			<div>菜单一</div>
			<div>菜单二</div>
			<div class="menu-sep"></div>
			<div data-options="iconCls:'icon-save'">保存</div>
			
			
			
			
		</div>
		
		
	</body>
</html>
